<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <div style="margin-bottom: 10px;">
      <span style="font-weight: bold">开工时间：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.startWorkDateList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="handleStartWorkDate(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
      <a-range-picker v-show="this.currentKey1" @change="onChangeRangeDate1" format="YYYY-MM-DD"
                      v-model:value="value1"/>
    </div>

    <div style="margin-bottom: 10px;">
      <span style="font-weight: bold">竣工时间：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.completionDateList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="handleCompletionDate(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
      <a-range-picker v-show="this.currentKey2" @change="onChangeRangeDate2" format="YYYY-MM-DD"
                      v-model:value="value2"/>
    </div>

    <div style="margin-bottom: 10px;">
      <span style="font-weight: bold">工程状态：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.projectStatusList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="handleChangeProjectStatus(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
    </div>

    <!--<div id="myChart">

    </div>-->
    <div>
      <!--<a-row>
        <a-col :span="12" style="background: lightgrey">
          <Pie ref="Pie" :height="height" style="padding-top: 10px"></Pie>
        </a-col>
        <a-col :span="12">
          <Pie ref="Pie" :height="height"></Pie>
        </a-col>
      </a-row>-->
      <div ref="main" style="width: 500px;height: 300px"></div>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="progressSlot" slot-scope="text, record">
          <a-progress :percent="record.projectProgress" style="padding-right: 10px"/>
        </span>
      </a-table>
    </div>

    <!--<gh-project-manage-modal ref="modalForm" @ok="modalFormOk"></gh-project-manage-modal>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import {getAction} from "../../../../../api/manage";
  import {filterObj} from '@/utils/util';
  import * as echarts from 'echarts';
  import Pie from '@/components/chart/Pie'
  import moment from 'moment'

  export default {
    name: 'projectCountReport',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      Pie,
    },
    data() {
      return {
        projectStatusList: [],
        startWorkDateList: [],
        completionDateList: [],
        value1: [],
        value2: [],
        height: 420,
        description: '在建工程表页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '姓名',
            align: "center",
            width: 120,
            dataIndex: 'customerInfo.name'
          },
          {
            title: '项目地址',
            align: "center",
            dataIndex: 'customerInfo.address'
          },
          {
            title: '房屋户型',
            align: "center",
            dataIndex: 'customerInfo.houseType',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('customer_info_house_type', text);
            }
          },
          {
            title: '房屋面积',
            align: "center",
            dataIndex: 'customerInfo.houseArea'
          },
          {
            title: '联系方式',
            align: "center",
            dataIndex: 'customerInfo.phone'
          },
          {
            title: '项目状态',
            align: "center",
            dataIndex: 'projectStatus',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('project_manage_project_status', text);
            }
          },
          {
            title: '开工日期',
            align: "center",
            width: 200,
            dataIndex: 'startWorkDate'
          },
          {
            title: '竣工日期',
            align: "center",
            width: 200,
            dataIndex: 'completionDate'
          },

          {
            title: '总工期',
            align: "center",
            dataIndex: 'totalTimeLimit'
          },
          {
            title: '剩余工期',
            align: "center",
            dataIndex: 'surplusTimeLimit',
            customRender:function (text) {
              if (text == null || text == 0){
                return "--";
              }else {
                return text;
              }
            }
          },
          {
            title: '超期天数',
            align: "center",
            dataIndex: 'exceedTimeLimitNum',
            customRender:function (text) {
              if (text == null || text == 0){
                return "--";
              }else {
                return text;
              }
            }
          },
        ],
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* 数据源 */
        dataSource: [],
        pieDataList: [],
        currentProjectStatus: '',     //选中的项目状态
        currentStartWorkDate: '',     //选中的开工日期
        currentCompletionDate: '',    //选中的竣工日期
        currentKey1: false,
        currentKey2: false,
        startDate1: '',
        endDate1: '',
        startDate2: '',
        endDate2: '',
        url: {
          list: "/ghProjectManage/list",
          delete: "/ghProjectManage/delete",
          deleteBatch: "/ghProjectManage/deleteBatch",
          exportXlsUrl: "/ghProjectManage/exportXls",
          importExcelUrl: "/ghProjectManage/importExcel",
          getItemsByDictCodeUrl: "/ghProjectManage/getItemsByDictCode",

          queryPieDataList: "/ghProjectManage/queryPieData"
        },
        dictOptions: {},
        superFieldList: [],
      }
    },
    created() {
      this.loadData();
      this.initSearchConditionData();
    },
    mounted() {
      this.drawChart();
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.main);
        let data = [];
        getAction(this.url.queryPieDataList).then((res) => {
          if (res.success) {
            this.pieDataList = res.result.records || res.result;
            let p1 = 0;
            let p2 = 0
            let p3 = 0
            let p4 = 0
            let p5 = 0
            let p6 = 0
            for (let i=0;i<this.pieDataList.length;i++){
              switch (this.pieDataList[i].projectStatus) {
                case 1:
                  p1++
                  break;
                case 2:
                  p2++
                  break;
                case 3:
                  p3++
                  break;
                case 4:
                  p4++
                  break;
                case 5:
                  p5++
                  break;
                case 6:
                  p6++
                  break;
              }
            }
            if (p1 !== 0){
              data.push({value: p1,name:'未开工'})
            }
            if (p2 !== 0){
              data.push({value: p2,name:'即将开工'})
            }
            if (p3 !== 0){
              data.push({value: p3,name:'已开工'})
            }
            if (p4 !== 0){
              data.push({value: p4,name:'即将超期'})
            }
            if (p5 !== 0){
              data.push({value: p5,name:'已超期'})
            }
            if (p6 !== 0){
              data.push({value: p6,name:'已完工'})
            }
          }
          // 指定图表的配置项和数据
          let option = {
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                name: "个数",
                type: "pie",
                data: data,
                label:{
                  show: true,
                  position: 'inside',
                }
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      },
      //根据项目状态查询数据
      handleChangeProjectStatus(key, itemValue) {
        for (let i = 0; i < this.projectStatusList.length; i++) {
          if (key == this.projectStatusList[i].key) {
            this.projectStatusList[i].checkedValue = true;
          } else {
            this.projectStatusList[i].checkedValue = false;
          }
        }
        this.currentProjectStatus = itemValue;
        this.loadData();
      },
      onChangeRangeDate1(value, dateString) {
        this.startDate1 = dateString[0];
        this.endDate1 = dateString[1];
        this.currentStartWorkDate = "customizeTime1";
        this.loadData();
      },
      onChangeRangeDate2(value, dateString) {
        this.startDate2 = dateString[0];
        this.endDate2 = dateString[1];
        this.currentCompletionDate = "customizeTime2";
        this.loadData();
      },
      //根据开工时间查询数据
      handleStartWorkDate(key, itemValue) {
        for (let i = 0; i < this.startWorkDateList.length; i++) {
          if (key == this.startWorkDateList[i].key) {
            this.startWorkDateList[i].checkedValue = true;
          } else {
            this.startWorkDateList[i].checkedValue = false;
          }
        }
        if (key == 'key9') {
          this.currentKey1 = true;
        } else {
          this.currentKey1 = false;
          this.value1 = [],
            this.currentStartWorkDate = itemValue;
          this.loadData();
        }
      },
      //根据竣工时间查询数据
      handleCompletionDate(key, itemValue) {
        for (let i = 0; i < this.completionDateList.length; i++) {
          if (key == this.completionDateList[i].key) {
            this.completionDateList[i].checkedValue = true;
          } else {
            this.completionDateList[i].checkedValue = false;
          }
        }
        if (key == 'key9') {
          this.currentKey2 = true;
        } else {
          this.currentKey2 = false;
          this.value2 = [],
            this.currentCompletionDate = itemValue;
          this.loadData();
        }
      },
      initSearchConditionData() {
        getAction(this.url.getItemsByDictCodeUrl).then(res => {
          if (res.success) {
            this.projectStatusList = res.result.projectStatusDictItemList;
            this.startWorkDateList = res.result.startWorkDateItemList;
            this.completionDateList = res.result.completionDateItemList;
          }
        })
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        if (this.currentProjectStatus != null && this.currentProjectStatus !== '' && this.currentProjectStatus != 0) {
          params.projectStatus = this.currentProjectStatus;
        }

        if (this.currentStartWorkDate != null && this.currentStartWorkDate !== '') {
          params.currentStartWorkDate = this.currentStartWorkDate;
          if (this.currentStartWorkDate === "customizeTime1"){
            params.beginTime1 = this.startDate1;
            params.endTime1 = this.endDate1;
          }
        }

        if (this.currentCompletionDate != null && this.currentCompletionDate !== '') {
          params.currentCompletionDate = this.currentCompletionDate;
          if (this.currentCompletionDate === "customizeTime2"){
            params.beginTime2 = this.startDate2;
            params.endTime2 = this.endDate2;
          }
        }
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result;
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if (this.superQueryParams) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  #myChart{
    width: 100%;
    height: 500px;
    margin: 0 auto;
    margin-top: 5%;
  }
</style>